<template>
	<!-- <view class="plr-16">
		<view class="flex flex-js-sb">
			<w-image @click.native="toPage('/pages/collectionList/collectionList?type=0')" src="/static/bg/index_new_mmarket.png" :width="203" :height="128"></w-image>
			<w-image @click.native="toPage('/pages/collectionList/collectionList?type=1')" src="/static/bg/index_mh.png" :width="128" :height="128"></w-image>		
		</view>
		<w-image @click.native="toPage(appConfig.activity_url || '')" class="mt-12" src="/static/bg/index_activity.png" width="100%" mode="widthFix"></w-image>	
	</view> -->
	<view class="card-box flex flex-ai-center flex-js-sb plr-8">
		<view class="left-swiper">
			<!-- <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="h-100" circular>
				<swiper-item v-for="(item,index) in banners" :key="item.id">
					<image @click="bannerClick(item)" :src="$ossUrl + item.image" class="w-100 h-100"></image>
				</swiper-item>
			</swiper> -->
			 <u-swiper circular :list="banners" keyName="image" height="100%" indicator indicatorMode="dot" indicatorActiveColor="#00FFAA" radius="15" indicatorInactiveColor="#391818" @click="bannerClick"></u-swiper>
		</view>
		<view class="flex flex-dir-col flex-js-sb h-100" style="width: 368rpx;">
			<w-image @click.native="indexToPage(appConfig.index_url1)" :src="appConfig.index_image1" width="100%" :height="118/2"></w-image>
			<w-image @click.native="indexToPage(appConfig.index_url2)" :src="appConfig.index_image2" width="100%" :height="118/2"></w-image>
			<w-image @click.native="indexToPage(appConfig.index_url3)" :src="appConfig.index_image3" width="100%" :height="118/2"></w-image>
			<!-- <view @click="toPage('/pages/market/market')"  class="right-item flex flex-ai-center flex-js-sb">
				<view class="flex flex-dir-col">
					<view class="font-color-222 font-size-13 font-w-bold">市场</view>
					<view class="font-color-999 mt-4" style="font-size: 18rpx;">板块涨幅一览无余</view>
				</view>
				<w-icon name="index-market" :size="74/2"></w-icon>
			</view>
			<view @click="toPage('/pages/toDayHotList/toDayHotList')" class="right-item flex flex-ai-center flex-js-sb">
				<view class="flex flex-dir-col">
					<view class="font-color-222 font-size-13 font-w-bold">今日热榜</view>
					<view class="font-color-999 mt-4" style="font-size: 18rpx;">每点24点更新</view>
				</view>
				<w-icon name="index-today-hot" :size="74/2"></w-icon>
			</view>
			
			<view @click="toOutLinl" class="right-item flex flex-ai-center flex-js-sb">
				<view class="flex flex-dir-col">
					<view class="font-color-222 font-size-13 font-w-bold">加入社群</view>
					<view class="font-color-999 mt-4" style="font-size: 18rpx;">好友相伴，共建新征程</view>
				</view>
				<w-icon name="icon-join" :size="74/2"></w-icon>
			</view> -->
			<!-- <view @click="toPage('/pages/invitation/invitation')" class="right-item flex flex-ai-center flex-js-sb">
				<view class="flex flex-dir-col">
					<view class="font-color-222 font-size-13 font-w-bold">邀请好友</view>
					<view class="font-color-999 mt-4" style="font-size: 18rpx;">与好友共享数藏盛宴</view>
				</view>
				<w-icon name="index-invite" :size="74/2"></w-icon>
			</view> -->
		</view>
	</view>
<!-- 	<view class="plr-8 card-box">
		<view class="flex flex-js-sb h-100">
			<view class="flex flex-dir-col flex-js-sb h-100">
				<w-image @click.native="toPage('/pages/toDayHotList/toDayHotList')" src="/static/bg/index-today.png" width="179" mode="widthFix"></w-image>
				<view class="flex flex-ai-center flex-js-sb">
					<w-image @click.native="toPage('/pages/invitation/invitation')" src="/static/bg/index-yqhy.png" width="85" mode="widthFix"></w-image>
					<w-image @click.native="toPage('/pages/my/service')" src="/static/bg/index-jrsq.png" width="85" mode="widthFix"></w-image> 
				</view>
			</view>
			<w-image @click.native="toPage('/pages/market/market')" src="/static/bg/index-jysc.png" width="171" height="152"></w-image>
			<view @click="toPage('/pages/market/market')" class="market-image" style="color: #EA0C09;">
				<view class=" font-w-bold font-size-18 " style="color: transparent;">交易市场</view>
				<view class="flex flex-ai-center flex-js-sa jyzl-box mt-12">
					<view class="flex flex-dir-col">
						<view class="key-title">交易总量</view>
						<view class=" font-w-500 font-size-13 mt-4">{{ total_money }}</view>
					</view>
					<u-line direction="col" length="34rpx" color="#fff"></u-line>
					<view class="flex flex-dir-col ">
						<view class="key-title">今日新增</view>
						<view class=" font-w-500 font-size-13 mt-4">{{ today_increase }}%</view>
					</view>
				</view>
				<view class="flex mt-12">
					<view class="qukankan flex flex-ai-center">
						<view class="font-size-14 font-color-white font-w-500 mr-5">去看看</view>
						<w-icon name="arrow-right-white1"></w-icon>
					</view>
				</view>
			</view>
		</view>
	</view> -->
</template>

<script>
	import {
		index_transaction
	} from '@/api/news/index.js'
	export default {
		name: 'cardAction',
		props:{
			banners:{
				type:Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				today_increase:0,
				total_money:0
			}
		},
		mounted() {
			this.getIndexNumber()
		},
		methods: {
			toPage(url) {
				console.log(url)
				if (!this.isLogin) {
					return uni.$emit('showLogin')
				}
				if (url) {
					uni.navigateTo({
						url
					})
				} else {
					uni.showToast({
						title: '敬请期待',
						icon: 'none'
					})
				}
			},
			bannerClick(index){
				console.log(item)
				let item = this.banners[index]
				if(item.url_type == 2) {
					// #ifdef APP
					// plus.runtime.openURL(item.url)
					this.openExternalLink(item.url)
					// #endif
					// #ifdef H5
					window.location.href = item.url
					// #endif
				}else {
					this.toPage(item.url)
				}
			},
			isHttpOrHttps(url) {
			    return url.startsWith('http://') || url.startsWith('https://');
			},
			indexToPage(url){
				if(this.isHttpOrHttps(url)) {
					this.toOutLinl(url)
				}else {
					this.toPage(url)
				}
			},
			toOutLinl(url = ''){
				// let url = 'https://www.kdocs.cn/l/coaVxzIXnBig'
				// #ifdef APP
				// plus.runtime.openURL(item.url)
				this.openExternalLink(url)
				// #endif
				// #ifdef H5
				window.location.href = url
				// #endif
			},
			async getIndexNumber(){
				const { code,data } = await index_transaction()
				if(code != 1) return
				this.today_increase = data.today_increase
				this.total_money = data.total_money
			},
			openExternalLink(url) {
				// 获取状态栏高度，适配iOS
				const statusbarHeight = plus.navigator.getStatusbarHeight();
			
				// 创建新的Webview窗口
				const newWebview = plus.webview.create(url, 'newWebviewId', {
					top: `${statusbarHeight}px`, // 适配状态栏高度
					bottom: '0px',
					render: 'always'
				});
			
				// 添加返回按钮
				const backButton = new plus.nativeObj.View('backButton', {
					top: `${10}px`, // 根据需要调整位置
					right: '120px',
					width: '70px',
					height: '30px',
				});
			
				// 绘制返回按钮背景
				backButton.drawRect({
					color: 'rgba(0,0,0,0.6)',
					radius: '5px'
				}, {
					top: '0px',
					left: '0px',
					width: '100%',
					height: '100%'
				});
			
				// 绘制返回按钮文字
				backButton.drawText('返回app', {
					top: '0px',
					left: '0px',
					width: '100%',
					height: '100%'
				}, {
					size: '16px',
					color: '#FFFFFF',
					align: 'center',
					verticalAlign: 'middle'
				});
			
				// 返回按钮点击事件
				backButton.addEventListener('click', function() {
					newWebview.close('slide-out-right', 300);
				});
			
				// 按钮拖动逻辑
				let startX, startY, initialLeft, initialTop;
			
				backButton.addEventListener('touchstart', function(event) {
					startX = event.touch.clientX;
					startY = event.touch.clientY;
					let position = backButton.getPosition();
					initialLeft = position.left;
					initialTop = position.top;
				});
			
				backButton.addEventListener('touchmove', function(event) {
					let deltaX = event.touch.clientX - startX;
					let deltaY = event.touch.clientY - startY;
					let newLeft = initialLeft + deltaX;
					let newTop = initialTop + deltaY;
			
					backButton.setStyles({
						left: `${newLeft}px`,
						top: `${newTop}px`
					});
				});
			
				// 将返回按钮添加到新Webview窗口
				newWebview.append(backButton);
			
				// 打开新的Webview窗口
				newWebview.show('slide-in-right', 300);
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.card-box {
		height: 386rpx;
		.left-swiper {
			width: 344rpx;
			height: 100%;
		}
		.right-item {
			width: 378rpx;
			height: 118rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(213,215,223,0.1);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 22rpx 34rpx 22rpx 22rpx;
			box-sizing: border-box;
		}
	}
	.market-image {
		width: 342rpx;
		height: 304rpx;
		background: url($IMG_URL + '/static/bg/index-jysc.png') no-repeat;
		background-size: 100% 100%;
		padding: 32rpx 26rpx 26rpx;
		box-sizing: border-box;
		.jyzl-box {
			width: 290rpx;
			height: 98rpx;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 16rpx;
			.key-title {
				font-weight: 500;
				font-size: 20rpx;
			}
		}
		.qukankan {
			height: 60rpx;
			background: linear-gradient( 90deg, #00D1FF 0%, #478CFF 50%, #00C3FF 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid rgba(255,255,255,0.75);
			padding: 20rpx;
		}
	}
</style>